<!--
 * @Description: 学生上传视频查看详情
 * @Author: liyujie
 * @Date: 2021/3/15
 * @Last Modified by: liyujie
 * @Last Modified time: 2021/3/15
-->
<template>
    <div
        class="wrapper"
        ref="wrapper"
    >
        <div
            class="content-wrapper"
            ref="contentWrapper"
        >
            <!-- 委派人 -->
            <div class="base-info">
                <div class="header">
                    <div class="header-title">委派人</div>
                    <el-button
                        type="text"
                        size="medium"
                        @click="handleRoute('dormVideoList')"
                    >
                        返回
                    </el-button>
                </div>
                <div class="content student">
                    <el-form label-width="54px">
                        <el-form-item
                            label="委派人"
                            style="margin-bottom: 8px"
                        >
                            <el-select
                                v-model="student_no"
                                size="medium"
                                clearable
                                filterable
                                placeholder="全部"
                                style="width: 360px"
                                @change="handleStudentChange"
                            >
                                <el-option
                                    v-for="(item,index) in studentList"
                                    :key="index"
                                    :label="item.true_name"
                                    :value="item.student_no"
                                />
                            </el-select>
                        </el-form-item>
                        <div class="tips">选择委派人进行查看每个委派人视频完成情况</div>
                    </el-form>
                </div>
            </div>
            <!-- 基本信息 -->
            <div class="base-info">
                <div class="header">
                    <div class="header-title">基础信息</div>
                </div>
                <div class="content">
                    <div class="base-info-item">
                        <div class="item-label">视频组名称：</div>
                        <div class="item-value">{{ formData.title ? formData.title : '--' }}</div>
                    </div>
                    <!--<div class="base-info-item">
                        <div class="item-label">产品名称：</div>
                        <div class="item-value">{{ formData.series_title ? formData.series_title : '&#45;&#45;' }}</div>
                    </div>
                    <div class="base-info-item">
                        <div class="item-label">学校名称：</div>
                        <div class="item-value">{{ formData.school_name ? formData.school_name : '&#45;&#45;' }}</div>
                    </div>-->
                    <div class="base-info-item">
                        <div class="item-label">视频数量：</div>
                        <div class="item-value">{{ formData.count ? formData.count : '--' }}</div>
                    </div>
                    <div class="base-info-item">
                        <div class="item-label">学校名称：</div>
                        <div class="item-value">{{ formData.school_name ? formData.school_name : '--' }}</div>
                    </div>
                    <div class="base-info-item">
                        <div class="item-label">寝室性别：</div>
                        <div class="item-value">
                            {{ formData.sex === 1 ? '男' : formData.sex === 2 ? '女' : '不限' }}
                        </div>
                    </div>
                </div>
            </div>
            <!-- 公司信息 -->
            <div
                class="base-info"
                style="padding-bottom: 24px"
            >
                <div class="header">
                    <div class="header-title">公司信息</div>
                </div>
                <div class="content">
                    <!-- table -->
                    <el-table
                        :data="formData.hire_link_list"
                        max-height="200"
                        style="width: 100%;"
                        ref="tempLateName"
                        class="data-table"
                    >
                        <el-table-column
                            label="序号"
                            align="center"
                            width="80"
                            type="index"
                        />
                        <el-table-column
                            prop="company_name"
                            label="公司名称"
                            show-overflow-tooltip
                            align="left"
                            :formatter="emptyFormatter"
                        />
                        <el-table-column
                            prop="series_title"
                            label="产品名称"
                            show-overflow-tooltip
                            align="left"
                            :formatter="emptyFormatter"
                        />
                        <el-table-column
                            prop="series_index"
                            label="批次"
                            show-overflow-tooltip
                            align="center"
                        />
                    </el-table>
                </div>
            </div>
            <!-- 基本信息 完成情况-->
            <div class="base-info complete">
                <div class="header">
                    <div class="header-title">完成情况</div>
                </div>
                <div class="content">
                    <div class="data-item">
                        <div class="item-value">
                            {{ statisticData.video_student_audit_pass_count }} / {{ statisticData.room_series_count }}
                        </div>
                        <div class="item-label">有效视频数/目标视频数</div>
                    </div>
                    <div class="data-item">
                        <div class="item-value">{{ statisticData.video_student_audit_wait_count ? statisticData.video_student_audit_wait_count : 0 }}</div>
                        <div class="item-label">待审核视频数</div>
                    </div>
                    <div class="data-item">
                        <div class="item-value">{{ statisticData.video_student_audit_fail_count ? statisticData.video_student_audit_fail_count : 0 }}</div>
                        <div class="item-label">未通过视频数</div>
                    </div>
                    <div class="data-item">
                        <div class="item-value">{{ statisticData.video_student_audit_submit_count ? statisticData.video_student_audit_submit_count : 0 }}</div>
                        <div class="item-label">提交视频总数</div>
                    </div>
                    <div class="data-item">
                        <div class="item-value">{{ statisticData.video_score ? statisticData.video_score : 0 }}</div>
                        <div class="item-label">总分数</div>
                    </div>
                </div>
            </div>
            <div
                class="video-list-wrapper"
                :style="{height: `${autoHeight}px`}"
            >
                <div class="header">
                    <div class="header-title">查看视频</div>
                </div>
                <div class="filter-view">
                    <div class="header-new-box">
                        <el-radio-group
                            v-model="filterData.student_audit_status"
                            size="small"
                            @change="handleStatusChange"
                        >
                            <el-radio-button
                                v-for="item in statusList"
                                :key="item.value"
                                :label="item.value"
                            >
                                {{ item.label }}
                            </el-radio-button>
                        </el-radio-group>
                    </div>
                    <div class="header-new-box">
                        <p class="header-new-box-title">
                            排序规则
                        </p>
                        <el-select
                            v-model="filterData.sort_field"
                            size="medium"
                            @change="getTableData(1)"
                        >
                            <el-option
                                v-for="item in sortTypeList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                        <el-select
                            v-model="filterData.sort_type"
                            size="medium"
                            style="width: 120px; margin-left: 12px"
                            @change="getTableData(1)"
                        >
                            <el-option
                                label="正序"
                                :value="0"
                            />
                            <el-option
                                label="倒序"
                                :value="1"
                            />
                        </el-select>
                    </div>
                    <div class="header-new-box">
                        <p class="header-new-box-title">
                            视频名称
                        </p>
                        <el-input
                            placeholder="请输入视频名称"
                            v-model="filterData.video_name"
                            suffix-icon="el-icon-search"
                            clearable
                            size="medium"
                            @keydown.enter.native="getTableData(1)"
                        />
                    </div>
                </div>
                <div
                    class="score-view"
                    v-if="filterData.student_audit_status === 2"
                >
                    <el-radio-group
                        v-model="filterData.score"
                        @change="getTableData(1)"
                    >
                        <el-radio
                            v-for="item in scoreList"
                            :key="item.value"
                            :label="item.value"
                        >
                            {{ item.label }}
                        </el-radio>
                    </el-radio-group>
                </div>

                <div
                    class="video-list"
                    v-loading="tableLoading"
                >
                    <div
                        class="video-item"
                        v-for="(item) in tableData"
                        :key="item.video_no"
                    >
                        <div
                            class="video-item-cover"
                            :style="{backgroundImage: `url(${item.video_cover})`}"
                            @click="previewVideo(item.video_url)"
                        >
                            <img src="@/assets/image/video-play.png">
                        </div>
                        <div class="video-item-info">
                            <div class="item-title">{{ item.video_name }}</div>
                            <div class="item-info">
                                <div class="video-size">{{ item.video_size | formatFileSize }}</div>
                                <div class="video-date">{{ item.upload_time * 1000 | dateFormatter('yyyy-MM-dd') }}上传</div>
                            </div>
                        </div>
                        <div
                            class="video-item-footer"
                            v-if="item.student_audit_status === -1"
                        >
                            <div class="reject-reason">
                                未通过原因：{{ item.student_audit_reason }}
                            </div>
                        </div>
                    </div>
                </div>
                <div
                    class="empty"
                    v-if="!tableData.length"
                >
                    <div class="empty-text">暂无数据</div>
                </div>
                <div class="list-footer">
                    <div class="option-view"/>
                    <el-pagination
                        layout="total, prev, pager, next, jumper"
                        background
                        :current-page.sync="page.now_page"
                        :total="page.total_count"
                        :page-size="page.page_size"
                        @current-change="getTableData"
                    />
                </div>
            </div>
        </div>
        <!-- 视频播放组件 -->
        <video-simple
            ref="videoSimple"
            :url="video_url"
            :top="54"
            :left="left"
        />
    </div>
</template>

<script>
import {back} from '@/mixin/back';
import {formatFileSize} from '@/assets/js/utils';
import VideoSimple from "@/components/dorm/video-simple";

export default {
    name: 'StudentVideoDetail',
    mixins: [back],
    components: { VideoSimple },
    data() {
        return {
            // 批次编号
            series_no: '',
            // 学生筛选
            student_no: '',
            studentList: [],
            // 筛选数据
            filterData: {
                sort_field: 0,
                sort_type: 0,
                student_audit_status: 1,
                video_name: '',
                score: 99
            },
            // 详情数据
            formData: {},
            statisticData: {},
            // 视频列表
            tableData: [],
            tableLoading: false,
            page: {
                now_page: 1,
                total_count: 0,
                page_size: 20
            },
            // 视频预览
            video_url: '',
            left: 0,
            video_nos: '',
            statusList: [
                {label: '待审核', value: 1},
                {label: '已通过', value: 2},
                {label: '未通过', value: -1},
            ],
            sortTypeList: [
                {label: '按更新时间', value: 0},
                {label: '按视频大小', value: 1},
                {label: '按视频时长', value: 2},
            ],
            scoreList: [
                { label: '全部', value: 99 },
                { label: '低于预期(1)', value: 1 },
                { label: '符合预期(2)', value: 2 },
                { label: '超出预期(3)', value: 3 },
                { label: '远超预期(5)', value: 5 },
            ],
            authResult: {},
            autoHeight: 1000,
            screenWidth: document.body.clientWidth,
        };
    },
    filters: {
        formatFileSize,
        // 文字超出隐藏显示扩展名
        videoNameFilter(val) {
            if(val.length > 14) {
                return `${val.slice(0, 10)}...${val.substring(val.lastIndexOf("."))}`;
            }
            return val;
        }
    },
    computed: {},
    watch: {
        screenWidth (val) {
            if (!this.timer) {
                this.screenWidth = val;
                this.timer = true;

                setTimeout( () => {
                    this.calcAutoHeight();
                    this.timer = false;
                }, 300);
            }
        }
    },

    mounted() {
        this.$store.commit('SET_HEADER', [{ title: "官网"},{ title: "商家增值服务"},{title: '寝室视频上传', path: '/bid/dorm-video-list'}, {title: '查看视频'}]);
        this.authResult = this.$route.meta.authResult;
        let query = this.$route.query;

        this.series_no = query.no;
        this.getTableData();
        this.getStudentList();
        this.getDetail();
        this.getStatistic();
        this.calcAutoHeight();
        window.onresize = () => {
            return (() => {
                window.screenWidth = document.body.clientWidth;
                this.screenWidth = window.screenWidth;
            })();
        };
    },

    methods: {
        /**
         * @description 获取学生筛选列表
         */
        getStudentList() {
            let params = { series_no: this.series_no };

            this.$post('/student/room_series%5Cget_appoint_student_list_for_select', params, res => {
                if (res.code === 1) {
                    this.studentList = res.data.list;
                } else {
                    this.$notify({
                        title: '提示',
                        type: 'warning',
                        message: res.msg
                    });
                }
            });
        },

        /**
         * @description 获取批次详情
         */
        getDetail() {
            let params = { series_no: this.series_no };

            this.$post('/student/room_series%5Cget', params, res => {
                if (res.code === 1) {
                    this.formData = res.data;
                } else {
                    this.$notify({
                        title: '提示',
                        type: 'warning',
                        message: res.msg
                    });
                }
            });
        },

        /**
         * @description 获取统计
         */
        getStatistic() {
            let params = {
                series_no: this.series_no,
                student_no: this.student_no
            };

            this.$post('/student/room_series%5Cget_student_statistic', params, res => {
                if (res.code === 1) {
                    this.statisticData = res.data;
                } else {
                    this.$notify({
                        title: '提示',
                        type: 'warning',
                        message: res.msg
                    });
                }
            });
        },

        /**
         * @description 获取列表数据
         * @param page
         */
        getTableData(page) {
            this.tableLoading = true;
            let params = { ...this.filterData };

            params.page_id = page || this.page.now_page;
            params.upload_student_no = this.student_no;
            params.series_no = this.series_no;
            this.$post('/student/room_series_video%5Cget_list', params, res => {
                if (res.code === 1) {
                    this.tableData = res.data.list;
                    this.page = res.data.page;
                } else {
                    this.$notify({
                        title: '提示',
                        type: 'warning',
                        message: res.msg
                    });
                }
                this.tableLoading = false;
            });
        },

        /**
         * @description 过滤函数
         */
        emptyFormatter(row, column, val) {
            if (!val) return '--';
            return val;
        },

        /**
         * 查看视频
         * @param url
         */
        previewVideo(url) {
            this.video_url = url;
            this.left = this.$refs.wrapper.clientWidth - 300;
            this.$refs.videoSimple.showVideo();
        },

        /**
         * 路由跳转
         * @param routeName
         * @param query
         */
        handleRoute(routeName, query) {
            this.$router.push({
                name: routeName,
                query
            });
        },

        /**
         * 筛选状态
         * @param val
         */
        handleStatusChange(val) {
            this.filterData.score = 99;
            this.getTableData(1);
        },

        /**
         * 切换学生
         */
        handleStudentChange() {
            this.getTableData(1);
            this.getStatistic();
        },

        /**
         * 动态计算高度
         */
        calcAutoHeight() {
            this.autoHeight = this.$refs.contentWrapper.offsetHeight;
        }
    }
};
</script>

<style lang="less" scoped>
.wrapper {
    width: 100%;
    flex: 1;
    .content-wrapper {
        display: flex;
        height: calc(100% - 24px);
        flex-direction: column;
        position: relative;
        margin: 12px;
        box-sizing: border-box;
        overflow-y: auto;
        &::-webkit-scrollbar {
            width: 0;
        }
        /*header*/
        .header {
            height: 66px;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid #F0F2F5;
            padding: 24px;

            .header-title {
                color: #333333;
                font-size: 20px;
                font-weight: 500;
            }
        }
        .base-info {
            margin-bottom: 12px;
            background: #fff;
            flex-shrink: 0;
            .content {
                display: flex;
                flex-wrap: wrap;
                padding: 24px 36px 4px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                .base-info-item {
                    width: 25%;
                    display: flex;
                    font-size: 14px;
                    margin-bottom: 20px;
                    .item-label {
                        color: #888888;
                    }
                    .item-value {
                        color: #333333;
                    }
                }
            }
            .content.student {
                display: flex;
                flex-direction: column;
                justify-content: center;
                padding: 12px 36px 24px;
                .tips {
                    font-size: 12px;
                    color: #999999;
                    margin-left: 54px;
                }
            }
        }
        .base-info.complete {
            height: 226px;
            .content {
                height: 160px;
                display: flex;
                padding: 12px 24px 24px;
                align-items: center;
                .data-item {
                    flex: 1;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    height: 111px;
                    .item-value {
                        width: 120px;
                        padding: 12px 0;
                        border-bottom: 1px solid #EBEEF5;
                        font-size: 30px;
                        font-family: PingFangSC-Medium, PingFang SC;
                        font-weight: 500;
                        color: rgba(0, 0, 0, 0.8);
                        line-height: 32px;
                        text-align: center;
                    }
                    .item-label {
                        margin-top: 12px;
                        font-size: 14px;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #333333;
                        line-height: 14px;
                    }
                }
            }
        }
        .video-list-wrapper {
            background: #fff;
            position: relative;
            height: 1200px;
            flex-shrink: 0;
            display: flex;
            flex-direction: column;
            .filter-view {
                margin-top: 12px;
                padding: 0 24px;
                box-sizing: border-box;
                display: flex;
                align-items: center;
                flex-wrap: wrap;

                .header-new-box {
                    display: flex;
                    align-items: center;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #333333;
                    white-space: nowrap;
                    margin-right: 24px;
                    margin-bottom: 12px;

                    &-title {
                        margin-right: 16px;
                        white-space: nowrap;
                    }
                }
            }
            .score-view {
                padding: 0 24px;
                margin-top: 12px;
            }
            .video-list {
                padding: 36px 24px 56px;
                overflow-y: auto;
                position: relative;
                display: flex;
                flex-wrap: wrap;
                flex-direction: row;
                &::-webkit-scrollbar {
                    width: 6px;
                }

                .video-item {
                    width: 212px;
                    background: #FFFFFF;
                    box-shadow: 0 0 20px 0 rgba(98, 152, 214, 0.2);
                    border-radius: 8px;
                    margin-bottom: 20px;
                    margin-right: 20px;
                    overflow: hidden;
                    display: flex;
                    flex-direction: column;
                    position: relative;
                    &:hover {
                        box-shadow: 0 0 30px 0 rgba(98, 152, 214, 0.5);
                        transition: all 0.3s ease-in-out;
                    }
                    .video-item-cover {
                        height: 144px;
                        background-position: center;
                        background-size: cover;
                        background-repeat: no-repeat;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        cursor: pointer;
                        img {
                            width: 60px;
                        }
                    }
                    .video-item-info {
                        padding: 10px 12px;
                        display: flex;
                        flex-direction: column;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        .item-title {
                            font-size: 14px;
                            color: #333333;
                            overflow:hidden;
                            text-overflow:ellipsis;
                            white-space:nowrap;
                            margin-bottom: 10px;
                            line-height: 20px;
                        }
                        .item-info {
                            display: flex;
                            justify-content: space-between;
                            font-size: 12px;
                            color: #999999;
                            line-height: 12px;
                        }
                    }
                    .video-item-footer {
                        height: 48px;
                        display: flex;
                        align-items: center;
                        font-weight: 400;
                        font-family: PingFangSC-Regular, PingFang SC;
                        .reject-reason {
                            font-size: 12px;
                            color: #F59E33;
                            line-height: 18px;
                            padding: 0 12px 12px;
                        }
                    }
                    .checkbox {
                        position: absolute;
                        top: 12px;
                        right: 0px;
                    }
                }
            }
            .empty {
                width: 100%;
                height: 300px;
                color: #909399;
                text-align: center;
                .empty-text {
                    margin-top: 30px;
                }
            }
            .list-footer {
                width: 100%;
                height: 56px;
                background: #FFFFFF;
                box-shadow: 0 1px 0 0 #E7E7E7;
                position: absolute;
                left: 0;
                bottom: 0;
                border-top: 1px solid #F0F2F5;
                padding: 0 24px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                .option-view {

                }
                .el-pagination {
                    background-color: transparent;
                }
            }
        }
    }
    /deep/ .el-radio-button {
        &.is-active {
            .el-radio-button__inner {
                background: #E6F1FC;
                color: #20A0FF;
                border-color: #20A0FF;
            }
        }
    }
    /deep/ .el-dialog__header {
        padding-top: 10px;
        box-shadow:0 1px 0 0 rgba(233,233,233,1);
        display: flex;
        align-items: center;
        background: #FAFAFA;
        border-radius: 4px 4px 0 0;
        .el-dialog__title {
            font-weight: 500;
            color: #333;
            font-size: 14px;
        }
        .el-icon-close:before {
            color: rgb(194,194,194);
            font-size: 17px;
            font-weight: bold;
        }
        .el-dialog__headerbtn {
            top: 14px;
        }
    }
}
</style>

